import React, { useState, useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Card, Button, Tag, Form, Input, notification } from 'antd';
import { PhoneOutlined, IeOutlined, CheckCircleOutlined,CloseCircleOutlined } from '@ant-design/icons'
import { useSelector, useDispatch } from 'react-redux';
import { sheet_info,info_update,tag_change } from '../../../../api/sheetApi/api';
import './Userinfo.scss'

interface Props { }
function Userinfo(props: Props) {
    var state = useSelector((state: any) => state.state)
    var dispatch = useDispatch()
    var navigator = useNavigate()
    var [params, setParams] = useSearchParams()
    var id: any = params.get('id')
    var [info, setInfo] = useState<any>({})
    useEffect(() => {
        sheet_info({jobnumber:id}).then((res) => {
            console.log(res.data);
            setInfo(res.data)
        })
    }, [])
    // 返回
    var back = ()=>{
        navigator(-1)
    }
    // 显示编辑菜单
    var editinfo = () => {
        dispatch({ type: 'STATE', payload: null })
    }
    // 进行编辑
    var onFinish = (values: any) => {
            values.id = id
            console.log(values);
            
        info_update(values).then((res)=>{
            console.log(res.data);   
        })
        sheet_info(id).then((res) => {
            setInfo(res.data)
        })
        notification.success({message:'保存信息成功'})
        dispatch({ type: 'STATE2', payload: null })
    }
    var cancel = ()=>{
        dispatch({ type: 'STATE2', payload: null })
        notification.info({message:'已取消信息修改'})
    }
    
    console.log(Number(info.state));
    // 点击更改状态
    var tagClick = ()=>{ 
        if(info.state == "true"){
            tag_change({jobnumber:info.jobnumber,state:"false" }).then((res)=>{
                console.log(res.data);  
            })
            sheet_info(id).then((res) => {
                setInfo(res.data)
            })
        }else{
            tag_change({jobnumber:info.jobnumber,state:"true" }).then((res)=>{
                console.log(res.data);  
            })
            sheet_info(id).then((res) => {
                setInfo(res.data)
            })
        }


    }

    return (
        <div className='userinfo'>
            <Card title="员工详情" bordered={false}>
                <div className='oneinfo'>
                    <div className='child1'>
                        <Button onClick={back}>返回</Button>
                    </div>
                    <div className="child2">
                        <img src='https://cdn7.axureshop.com/demo/2004033/images/%E8%8A%B1%E5%90%8D%E5%86%8C/u3683.png' alt="" />
                        <h3>{info.worker}</h3>
                        <p className='child3'>{info.type} | {info.department} | {info.work}</p>
                        <span className='child4'> <PhoneOutlined /> {info.phone} </span> <span className='child4'> <IeOutlined /> {info.email}</span>
                        <div className='tag'>
                            {
                                info.state == "true" ?
                                <Tag icon={<CheckCircleOutlined />} color="success" onClick={tagClick}>
                                    启用
                                </Tag>
                                :
                                <Tag icon={<CloseCircleOutlined />} color="error" onClick={tagClick}>
                                    禁用
                                </Tag>
                            }
                        </div>
                    </div>
                </div>
            </Card>
            {
                state == true ?
                    <Card title="基础信息" bordered={false} style={{ marginTop: 50 }}>
                        <Button type='primary' className='editinfo' onClick={editinfo} disabled={info.state == "false"}>编辑</Button>
                        <div className='content'>
                            <div className='info1'>
                                <p>姓名: {info.worker}</p>
                                <p>部门组织: {info.department}</p>
                                <p>职位: {info.work}</p>
                                <p>员工类型: {info.type}</p>
                            </div>
                            <div className="info2">
                                <p>工号: {info.jobnumber}</p>
                                <p>工作时长: {info.workage}</p>
                                <p>手机号码: {info.phone}</p>
                                <p>工作城市: {info.workplace} </p>
                            </div>
                        </div >
                    </Card>
                    :
                    <Card title="编辑信息" bordered={false} >
                        <div className='editcontent'>
                            <Form
                                labelCol={{ span: 6 }}
                                wrapperCol={{ span: 18 }}
                                onFinish={onFinish}
                            // 绑定form实例
                            //   form={form}
                            >

                               <div className='item1'>
                                    <Form.Item
                                        label="姓名"
                                        name="worker"
                                        rules={[{ required: true, message: '输入名称' }]}
                                        initialValue={info.worker}
                                    >
                                        <Input placeholder='输入名称' />
                                    </Form.Item>
                                    <Form.Item
                                        label="部门组织"
                                        name="department"
                                        rules={[{ required: true, message: '输入名称' }]}
                                        initialValue={info.department}
                                    >
                                        <Input placeholder='输入名称' />
                                    </Form.Item>
                                    <Form.Item
                                        label="职位"
                                        name="work"
                                        rules={[{ required: true, message: '输入名称' }]}
                                        initialValue={info.work}
                                    >
                                        <Input placeholder='输入名称' />
                                    </Form.Item>
                                    <Form.Item
                                        label="员工类型"
                                        name="type"
                                        rules={[{ required: true, message: '输入名称' }]}
                                        initialValue={info.type}
                                    >
                                        <Input placeholder='输入名称' />
                                    </Form.Item>
                               </div >

                                <div className='item2'>
                                    <Form.Item
                                        label="工号"
                                        name="jobnumber"
                                        rules={[{ required: true, message: '输入名称' }]}
                                        initialValue={info.jobnumber}
                                    >
                                        <Input placeholder='输入名称' />
                                    </Form.Item>
                                    <Form.Item
                                        label="工作时长"
                                        name="workage"
                                        rules={[{ required: true, message: '输入名称' }]}
                                        initialValue={info.workage}
                                    >
                                        <Input placeholder='输入名称' />
                                    </Form.Item>
                                    <Form.Item
                                        label="手机号码"
                                        name="phone"
                                        rules={[{ required: true, message: '输入名称' }]}
                                        initialValue={info.phone}
                                    >
                                        <Input placeholder='输入名称' />
                                    </Form.Item>
                                    <Form.Item
                                        label="工作城市"
                                        name="workplace"
                                        rules={[{ required: true, message: '输入名称' }]}
                                        initialValue={info.workplace}
                                    >
                                        <Input placeholder='输入名称' />
                                    </Form.Item>
                                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                    <Button type="primary" htmlType="submit">保存</Button>
                                    <Button onClick={cancel} style={{marginLeft:30}}>取消</Button>
                                </Form.Item>
                                </div >
                              
                            </Form>
                        </div >
                    </Card>
            }
        </div>
    );
}

export default Userinfo;